<template>
  <div class="app"> 
    
    <!-- 添加模块 -->
    <div class="clearfix" style="margin-bottom:20px;">  
      <div style="width:500px;float:left">
        <el-input placeholder="请输入学生容量" v-model="pageInfo.seatCount" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
        </el-input>
      </div>
      <el-button type="primary" style="float:right" @click="openAddClassroom()">添加</el-button>
    </div>    
    <!--显示教室数据-->
     <el-table :data="classroomData" borderstyle="width: 100%" border width="100%">
      <el-table-column type="index" label="序号" width="80"></el-table-column>    
      <el-table-column prop="classroomName" label="教室名称" width="180"></el-table-column>
      <el-table-column prop="seatCount" label="学生容量" width="180"></el-table-column>
      <el-table-column prop="remark" label="备注" width="220"></el-table-column>      
      <el-table-column label="操作">
        <template slot-scope="scope">
        <el-tooltip effect="dark" content="修改教室信息" placement="top">
          <el-button type="primary" icon="el-icon-edit" circle @click="openEditClassroom(scope.row)"></el-button>
        </el-tooltip>   
        <el-tooltip effect="dark" content="删除教室信息" placement="top">
          <el-button type="danger" icon="el-icon-delete" circle @click="deleteClassroom(scope.row)"></el-button>
        </el-tooltip> 
        </template>
      </el-table-column>
    </el-table>   
    <!-- :pager-count="11" -->
    <el-pagination style="width:560px" :page-size="pageInfo.size" layout="prev, pager, next" :pager-count="11" :total="total" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.page">
    </el-pagination>
    <!-- 添加教室弹出框模块 -->
    <el-dialog title="添加教室" :visible.sync="dialogAddVisible" width="30%" @close="closeAdddialog()">
      <el-form :model="addForm" :rules="rules" ref="addForm">
        <el-form-item label="教室名称" :label-width="formLabelWidth" prop="classroomName">
          <el-input v-model="addForm.classroomName" autocomplete="off"></el-input>        
        </el-form-item>
        <el-form-item label="学生容量" :label-width="formLabelWidth" prop="seatCount">
          <el-input v-model="addForm.seatCount" autocomplete="off"></el-input>        
        </el-form-item>        
        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input  type="textarea" v-model="addForm.remark" autocomplete="off"></el-input>
        </el-form-item>             
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="primary" @click="addClassroom('addForm')">提交</el-button>
        <el-button @click="closeAdddialog()">取 消</el-button>
      </div>
    </el-dialog>
        <!-- 修改教室弹出框模块 -->
     <el-dialog title="修改教室" :visible.sync="dialogEditVisible" width="30%" @close="closeEditdialog()">
      <el-form :model="editForm" :rules="rules" ref="editForm">          
        <el-form-item label="教室名称" :label-width="formLabelWidth" prop="classroomName">
          <el-input v-model="editForm.classroomName" autocomplete="off"></el-input>        
        </el-form-item>
        <el-form-item label="学生容量" :label-width="formLabelWidth" prop="seatCount">
          <el-input v-model="editForm.seatCount" autocomplete="off"></el-input>        
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input  type="textarea" v-model="editForm.remark" autocomplete="off"></el-input>
        </el-form-item>  
        <!--<el-form-item >
          <el-input type="hidden" v-model="editForm.id" autocomplete="off" ></el-input>        
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="primary" @click="editClassroom('editForm')">提交</el-button>
        <el-button @click="closeEditdialog()">取 消</el-button>
      </div>
    </el-dialog>   
  </div>
</template>

<script>
   export default {
    name: 'ClassroomList',
    data() {
      return { 
         pageInfo: {
          page: 1, //当前页码
          size: 2, //前台默认分页条数
          seatCount: "",
          orgId:'000'
        },
        total:'',
        addForm:{},
        editForm: {},
        formLabelWidth:'120px',
        classroomData:[],
        /*验证规则*/
        rules:{            
              classroomName: [{
              required: true,
              message: '请输入教室名称',
              trigger: 'blur'
          }],  
          seatCount: [{
              required: true,
              message: '请输入学生座位数',
              trigger: 'blur'
          }]
        },
        //显示添加窗体
        dialogAddVisible:false,
        dialogEditVisible:false
      }     
    },
     created() {
      this.render(); //渲染数据
    },
    methods: {
        //查询教室信息
      async render() {
       // var orgId='000';
        const {data: res} = await this.$http.post('classroom/queryall', this.pageInfo) // 获取数据      
        console.log(res);
       // this.total = res.data.length;
        this.total = res.data.recordCount; 
        if(res.ret !== 0) {
          return this.$message.error(res.msg)
        }
        // this.classroomData = res.data;
       this.classroomData = res.data.resList;
      },     
      //页面输入页码的处理
      handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        //this.pageInfo.page=val;
      },
      //页面更改页码处理函数
      handleCurrentChange(val) {
        //console.log(`当前页: ${val}`);  
        this.pageInfo.page = val;
        //console.log(this.pageInfo.page)
        this.search()
      },
      async search() {
        // 发起模糊查询的数据请求
        const {
          data: res
        } = await this.$http.post('classroom/query', this.pageInfo)
       console.log(res);
        this.total = res.data.recordCount; 
        this.classroomData= res.data.resList;
        //抛出异常错误
        if(res.ret !== 0) {
          return this.$message.error(res.msg)
        }
      },
       //打开添加教室信息窗体
      openAddClassroom(){
        this.dialogAddVisible = true;      
       },
       //添加教室信息
    addClassroom(formName){
         this.$refs[formName].validate(async valid => {
          if(!valid) return
          // 可以发起添加院校的网络请求         
          const {
            data: res
          } = await this.$http.post('classroom/save', this.addForm);
         if(res.ret==0){
          this.$message.success('添加教室成功！');
         // 重新获取教室列表数据
          this.render();
        }
         else
        {
           this.$message.error('添加教室失败：'+res.msg);
        }
      }
         )
         },
       closeAdddialog()
        {
           this.dialogAddVisible = false;
          // this.$refs.form.resetFields();
          this.addForm=[];
        },
        //打开更新教室窗体
      async openEditClassroom(row){
        
        this.dialogEditVisible=true;
        console.log(row);
        const {
          data: res
        } = await this.$http.post('classroom/findById', {
          id: row.id
        })
        //抛出异常错误
        if(res.ret !== 0) {
          return this.$message.error(res.msg)
        }        
        this.editForm = res.data;
      }, 
      //更新教室信息
    async editClassroom(form){
      console.log("当前窗体数据：");
       console.log(this.editForm);
       this.$refs[form].validate(async valid => {
          if(!valid) return
          // 发起修改院校信息的数据请求
          const {
            data: res
          } = await this.$http.post('classroom/update', this.editForm)
          //抛出异常错误
          if(res.ret !== 0) {
            return this.$message.error('更新教室信息失败：'+res.msg)
          } 
          else{         
          // 提示修改成功
          this.$message.success('更新教室信息成功！');
           // 刷新数据列表
          this.render();
          }
        })},
         //关闭更新窗体 
         closeEditdialog()
        {
           this.dialogEditVisible = false;
            this.editForm=[];
           //this.$refs.editForm.resetFields();
        },
        async deleteClassroom(row)
        {
         // 弹框询问是否删除数据
        const confirmResult = await this.$confirm(
          '此操作将删除该教室所有信息, 是否继续?',
          '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => err)

        // 如果确认删除，则返回值为字符串 confirm
        // 如果取消了删除，则返回值为字符串 cancel
        // console.log(confirmResult)
        if(confirmResult !== 'confirm') {
          return this.$message.info('已取消删除')
        }
        
        //异步数据库删除
        const {         
          data: res
        } = await this.$http.post('classroom/update', {id: row.id,isValidated:'n'})
        //抛出异常错误
        if(res.ret !== 0) {
          return this.$message.error(res.msg)
        }

        this.$message.success('删除教室成功！')
        this.render()
      },
    }
    }
</script>

<style scoped="scoped">
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }  
  .el-table
  {
    width:900px;
  }
 .el-input {
    width: 130px;
  } 
  .clearfix {
    *zoom: 1
  }
  
  .clearfix:after {
    display: block;
    content: "";
    height: 0;
    clear: both;
    visibility: hidden;
  }
  
 .el-input {
    width: 100%;
  }
</style>